<template>
  <el-dialog title="测评票统计" :fullscreen='true' :close-on-click-modal="false" :visible.sync="summary4Data.visible" width="100%">
    <div class="fontDa fontDaTwo" v-loading.fullscreen.lock="fullscreenLoading4">
      <div class="customTableHeader">
        <div style="text-align:right; margin-bottom: 10px;">
          <el-button type="primary" @click="exportExcel(cppName+'_会议')">导出统计表</el-button>
        </div>
      </div>
      <div class="cpTable" id="two">
        <div class="customTableHeader headers">
          <div class="customTableTitle"><tr><td>{{ cppName }}</td></tr></div>
        </div>
        <el-table ref="report-table" :data="tableData" :span-method="objectSpanMethod">
          <el-table-column type="index" label="序号" width="70"></el-table-column>
          <el-table-column v-for="col in this.colShowAll" :prop="col.prop" :label="col.label" v-if="!col.hidden" align="center" min-width="130"></el-table-column>
          <el-table-column v-for="(gz,j) in tableColumn"  :label="gz.title" align="center" :fzIndex="j" min-width="100">
            <el-table-column v-for="(i,j) in gz.child"  :label="i.label" :prop="i.prop"  align="center" :fzIndex="j" min-width="100">
            </el-table-column>
          </el-table-column>
        </el-table>
        <template v-for="(item,index) in questionList" >
            <div style="width: 100%;margin-top: 25px;" class="zfheaderbox" >
              <div>{{item.title}}</div>
            </div>
          <div style="width: 100%;" class="zfheaderbox" v-for="(j,i) in item.answer">
<!--             placeholder="新选拔任用领导人员民主评议表"-->
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 10}"
              size="medium"
              readonly
              v-model="j.answer">
            </el-input>
          </div>
        </template>
        <div style="width: 100%;" class="zfheaderbox">
          <div style="color: red">{{text}}</div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getData4P4 } from '@/api/ceping/cepinghzglb'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
    props:{
        summary4Data:{},
    },
  data() {
    return {
      cppName:"",
      params:{
          hdId:"",
          cppId:""
      },
      tableColumn: [],
      tableData: [],
      colShowAll:[],
      questionList:[],
      text:"",
      fullscreenLoading4:false,
    }
  },
  watch:{
    summary4Data:{
        handler(newVal,oldVal){
            if(newVal.visible){
                this.params.hdId = newVal.hdId;
                this.params.cppId = newVal.cppId;
                this.getListone()
            }
        },
        deep:true,
        immediate:true,
    },
  },
  methods: {
    getListone(){
        this.fullscreenLoading4 = true;
        getData4P4(this.params).then((response)=>{
         //console.log(response.data.data)
            this.cppName = response.data.data.title;
            this.tableData = response.data.data.userValue;
            this.colShowAll = response.data.data.userTitle;
            this.tableColumn = response.data.data.groupTitle;
            this.text = response.data.data.qqText;
            this.fullscreenLoading4 = false;
        })
    },
    exportExcel(excelName) {
      try {
        const ql = document.getElementById('two')
        const $e = ql
        let $table = ql

        if (!$table) {
          $table = $e
        }
        const wb = XLSX.utils.table_to_book($table, {raw: true})
        const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
        FileSaver.saveAs(
          new Blob([wbout], {type: 'application/octet-stream'}),
          `${excelName}.xlsx`,
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
      }
    },
    objectSpanMethod({row, column, rowIndex, columnIndex}) {

    },

  }
}
</script>

<style>
.h_dw_time{
  display: flex;
  justify-content: space-between;
}
.fontDaTwo .el-table{
  font-size:16px !important;
}
</style>

